<template>
	<view style="background-color: white;">
		<view class="">
			<view class="cart_name">购物车</view>
			<view class="edit_tit" @click="editState=!editState">
				<span v-show="!editState">编辑</span><span v-show="editState">完成</span>
			</view>
		</view>
		<view class="total_radio" @click="changeAllState(allState)" style="padding-left: 12px;">
			<label class="radio">
			<radio :checked="allState"/><text>全部</text>
		</label>
		</view>
		<scroll-view scroll-y="true" class="right_scroll">
			<uni-list class="my_list cart_list" v-if="allList.length">
				<uni-list-item v-for="(item, index) in allList" :key="index">
					<!-- 自定义 header -->
					<view slot="header" class="item_header">
						<view class="item_check">
							<label class="radio">
								<radio :checked="item.checked" @click="changeCheckState(index)"/>
							</label>
						</view>
						
						<image :src="item.pic" mode="widthFix" class="list_img"></image>
						</view>
					<!-- 自定义 body -->
					<view slot="body" class="item_body">
						<view class="item_name">{{ item.name }}</view>
						<view class="item_desc">
							{{item.subTitle}}
						</view>
						<view class="buy_area">
							<view class="item_price">
								¥{{item.promotionPrice.toFixed(2)}}
							</view>
							<view class="item_price2" v-if="item.promotionPrice<item.price">
								¥{{item.price.toFixed(2)}}
							</view>
							<view style="display: flex;justify-content: space-between;">
								<span class="add_btn" @click="minus(item.id)">-</span>
								<span class="item_num">{{item.num}}</span>
								<span class="add_btn" @click="add(item)">+</span>
							</view>
						</view>
					</view>
				</uni-list-item>
			</uni-list>
		</scroll-view>
		<view class="" style="display: flex;justify-content: space-between;align-items: center;font-size: 15px;position: fixed;bottom: 50px;background-color: inherit;width: 100vw;box-sizing: border-box;padding: 12px 15px;">
			<view class="total_radio" @click="changeAllState(allState)">
				<label class="radio">
				<radio :checked="allState"/><text>全选</text>
			</label>
			</view>
			<view class="total_price" v-show="!editState">
				合计: <span style="font-size: 18px !important;color:#de3e26;font-weight: bold;margin-left: 20px;">¥{{price.toFixed(2)}}</span>
			</view>
			<view class="total_pay" v-show="!editState">
				<button type="default" class="pay_btn" style="background-color: #de3e26;color: white;font-size: 15px !important;">结算({{checkedNum}})</button>
			</view>
			<view class="total_pay" v-show="editState">
				<button type="default" class="pay_btn" style="background-color: #de3e26;color: white;font-size: 15px !important;" @click="del">删除</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations,mapState,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				editState:false
			}
		},
		methods: {
			...mapMutations(['add','minus','del','changeCheckState','changeAllState']),
			translate(val){
				return val?"true":"false"
			}
		},
		computed: {
			...mapState(['allList','checkedList']),
			...mapGetters(['price','num','checkedNum']),
			allState(){
				return this.allList.every(item=>item.checked)
			}
		},
		onShow() {
			let pkList=JSON.parse(localStorage.getItem('cart')) 
			this.pickedList=pkList
		},
		watch: {
			pickedList(newValue) {
				console.log('changed');
				let nv=JSON.stringify(newValue)
				localStorage.setItem('cart',nv)
			}
		},
	}
</script>
<style>
	.uni-list-item__container{justify-content: space-around !important;}
</style>
<style lang="scss" scoped>
.cart_name{
	width: 100%;
	text-align: center;
	font-size: 44rpx;
	line-height: 100rpx;
}
.edit_tit{
	position: absolute;
	top: 0;
	right: 20rpx;
	padding: 0 60rpx 0 20rpx;
	line-height: 100rpx;
}
.right_scroll {
	height: 77vh;
	width: 100vw;
	margin-top: 10rpx;
	border-radius: 6px;
}
.my_list {
	font-size: 20rpx;
	border-radius: 6px !important;
	.item_header{
		display: flex;
		align-items: center;
		.item_check{
			margin-right: 14rpx;
		}
	}
	.area_tit {
		width: 100%;
	}
	.list_img {
		width: 6em;
		height: 6em;
	}
	.item_body {
		width: 500rpx;
		padding-left:4%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		.buy_area{
			width: 100%;
			display: flex;
			margin-top: 16rpx;
			align-items: center;
			justify-content: space-between;
		}
		.item_price{
			color: #de3e26;
			font-weight: bold;
			line-height: 36rpx;
		}
		.item_price2{
			color: #999999;
			text-decoration: line-through;
			font-weight: bold;
			font-size: 12px;
			line-height: 36rpx;
		}
		.item_num{
			display: block;
			width: 60rpx;
			line-height: 60rpx;
			text-align: center;
		}
		.add_btn{
			display: block;
			color: black;
			text-align: center;
			font-size: 60rpx;
			// margin-left: 40rpx;
			background-color: #f5f5f5;
			height: 60rpx !important;
			width: 60rpx !important;
			border-radius: 8rpx;
		}
	}
	.item_name {
		width:430rpx;
		max-height: 42px;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 4rpx;
	}
	.item_desc{
		font-size: 13px;
		color: #757575;
		width: 80%;
		max-height: 42px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>
